import React from "react";
import axios from "axios"
import testcss from "../css/test.scss"
import boot from "../../node_modules/bootstrap/dist/css/bootstrap.min.css"
import {mapStateToProps,mapDispatchToProps} from "../redux/action.js"
import {Provider,connect} from "react-redux"

class Shop extends React.Component{
	constructor(){
		super()
		this.state={
			arr:[]
		}
	}
	componentDidMount(){
		axios.get("data.json").then((result)=>{
			console.log(result)
			this.setState({
				arr:result.data
			})
		})
	}	
	//加入购物车
	addCart(info){
		//修改存入购物车的数组
		var cartinfo={id:info.id,goodsname:info.goodsname,price:info.price,num:1,src:info.src};
		var cart=this.props.cart;
		console.log(this.props.cart)
		var re=cart.findIndex((value,index,cart)=>{
			return value.id==info.id
		})
		if(re==-1){
			//需要把cartinfo 存入store
			this.props.add(cartinfo);		
		}else{
			//需要改数量
			this.props.addNum(re);
		}
		
	}

	render(){
		return(
			<div className="goods">
					<table className="table table-striped">
						  <thead>
						    <tr>
						      <td>功法层级</td>
						      <td>修仙大法</td>
						      <td>所需灵晶</td>
						      <td>功法数量</td>
						      <td>操作</td>
						    </tr>
						  </thead>
						  <tbody>
							{this.state.arr.map((item,index)=>{
								return <tr key={index}>
												<td><img src={item.src} /></td>
												<td>{item.goodsname}</td>
												<td>{item.price}</td>
												<td>{item.number}</td>
												<td>
													<button className="btn btn-success" onClick={()=>{this.addCart(item)}}>
													加入购物车</button>
												</td>
										</tr>
							})}
						  </tbody>
					</table>
					
						
			</div>
		)
	}
}
Shop=connect(mapStateToProps,mapDispatchToProps)(Shop)
export default Shop
